import React from "react"

// layouts
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"

// components
import ConsultButton from "../ConsultButton/ConsultButton"
// style sheet
import './help-main.css'
// antd-mobile
import {List, WhiteSpace, WingBlank,} from "antd-mobile"
import constants from "../../../../utils/constants";
import {Link} from "react-router-dom";
import gzhSrc from "../../../../res/images/web/my/公众号3.jpg"
const Item = List.Item


const HelpMain = props => {
    // props
    const {history,} = props

    // 常见问题
    const qList = constants.commonProblems

    const headerStyle = {
        fontSize: '16px',
        color: '#333',
        fontWeight: 'bold',
        marginTop: '1rem',
        marginBottom: '0.5rem',
    }

    const qHeader = <p style={headerStyle}>常见问题</p>

    const qListTemplate = qList.map((item, index) => {
        return (
            <Item
                key={item.title}
                onClick={() => history.push('./common-problem', {title: item.title,})}
            >
                {item.title}
            </Item>
        )
    })

    // 问题分类
    const bHeader = <p style={headerStyle}>问题分类</p>

    const bList = [
        {title: '账号问题', path: 'account-issue',},
        {title: '充值问题', path: 'consume',},
        {title: '主播相关', path: 'star',},
        {title: '观看问题', path: 'watch',},
        {title: '其他问题', path: 'other',},
    ]

    const bListTemplate = bList.map((item, index) => {
        return (
            <div
                key={item.title}
                // onClick={() => history.push(`help/${item.path}`)}
                onClick={() => history.push('help/comment')}
                className='help-btn'
            >
                {item.title}
            </div>
        )
    })

    return (
        <GoBackLayout
            history={history}
            title='帮助与反馈'
            rightContent={
                <Link to={'./feedback-list'}>
                    <span
                        style={{
                            color: 'rgba(51,51,51,0.8)',
                            lineHeight: '40px',
                        }}

                    >反馈记录</span>
                </Link>
            }
        >
            <div className='text-align-center pd-16-px'>
                <img src={gzhSrc} alt='' style={{width: '50%', marginBottom: '16px',}}/>
                <p>微信公众号服务中心</p>
            </div>
            <List
                renderHeader={qHeader}
            >
                {qListTemplate}
            </List>
            {/*<WhiteSpace size='xl'/>*/}
            {/*<WingBlank>*/}
            {/*    {bHeader}*/}
            {/*    <WhiteSpace/>*/}
            {/*    <div className='help-btns-ctn'>*/}
            {/*        {bListTemplate}*/}
            {/*    </div>*/}
            {/*</WingBlank>*/}
            <ConsultButton/>
        </GoBackLayout>
    )
}

export default HelpMain
